<template>
  <div>
    <div class="wallet-detail">
      <div class="card" v-for="(v, k) in detailList" :key="k">
        <div class="header">
          <div class="text">{{v.add_time}}</div>
          <div class="number"
            :class="{red: v.alter_amount.indexOf('-') === -1, blue: v.alter_amount.indexOf('-') !== -1}"
            v-html="v.alter_amount"
          ></div>
        </div>
        <div class="content">{{v.description}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'WalletDetail',
    data () {
      return {
        detailList: []
      }
    },
    methods: {
      getList () {
        let type = Number(this.$route.params.type)
        let url = ''
        switch (type) {
          case 1:
            url = '/vue/my/my_withdraw_journal'
            break
          case 2:
            url = '/vue/my/my_frozen_journal'
            break
        }
        this.$post(url, '').then(data => {
          for (let i = 0; i < data.length; i++) {
            if (data[i].alter_amount.indexOf('-') === -1) {
              data[i].alter_amount = '+<small>¥</small>' + data[i].alter_amount
            } else {
              data[i].alter_amount = '-<small>¥</small>' + data[i].alter_amount.substr(1)
            }
          }
          this.detailList = data
        })
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);
  @c-yellow: rgb(245, 166, 35);

  .wallet-detail {
    background-color: rgb(240, 244, 247);
    min-height: 100vh;
    overflow: hidden;
    .card {
      margin-top: 8px;
      padding: 12px;
      background-color: #FFF;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
      .header {
        padding-bottom: 12px;
        border-bottom: 1px solid @c-235;
        display: flex;
        justify-content: space-between;
        .text {
          width: 50%;
          flex: 0 0 auto;
          font-size: 12px;
          line-height: 24px;
          color: @c-124;
          text-align: left;
        }
        .number {
          width: 50%;
          flex: 0 0 auto;
          font-size: 16px;
          line-height: 24px;
          text-align: right;
          &.red {
            color: @c-red;
          }
          &.blue {
            color: @c-blue;
          }
          small {
            margin-left: 4px;
          }
        }
      }
      .content {
        font-size: 12px;
        line-height: 24px;
        color: @c-124;
        padding-top: 12px;
        text-align: left;
      }
    }
  }
</style>